<template>
	<view class="withdrawal" :style="[{paddingTop:statusBar+ 'px'}]">
		
		<view class="withdrawal-amount" v-if="user">
			<view class="withdrawal-amount-title">提现金额</view>
			<view class="withdrawal-amount-ipt-box">
				<view>￥</view>
				<input type="text" value="" v-if="user" :placeholder="'可提现'+ user.dividend_brokerage"  v-model="withdraw_amount" placeholder-style="color:#CCCCCC;font-size:32rpx;font-weight:400;"/>
				<image src="/static/images/cancle.png" class="clear-input" @click="clearMoneyNum()" mode=""></image>
			</view>
			<view class="withdrawal-amount-desc">
				<view>可提现佣金 ¥{{user.dividend_brokerage}}</view>
				<view>平台为用户代缴税金，每笔提现收取10%手续费</view>
			</view>
		</view>
		
		<view class="withdrawal-use-bank-card">
			
			
			<view class="bank-card-item" @click="addBankCard()">
				<view class="choice-item-left" >
					<view>银行卡</view>
				</view>
				<view class="choice-radio" >
					<view>银行卡管理</view>
					<image src="/static/images/right-grey-icon.png" class="choiced"  mode=""></image>
				</view>
				
			</view>
			<view class="bank-info" v-if="bankDate">
				<image :src="bankDate.logo" class="logo"   mode=""></image>
				
				<view>
					<view>{{bankDate.bank_name}}</view>
					<view>{{bankDate.real_name}}</view>
				</view>
			</view>
		</view>
		<view class="confirm-withdrawal" @click="withdraws()">确认提现</view>
		
		
	</view>
</template>

<script>
	import store from "store"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	import { withdraws,getBankCards,checkWithdrawState } from 'api/userAccountApi'
	import CurrentUser from "mixins/CurrentUser"
	import { getUser } from "api/userApi"
	export default {
		store,
		computed:{
			...mapGetters([
				'user',
				'statusBar'
			])
		},
		mixins: [
			CurrentUser
		],
		data(){
			return {
				hasBg:true,
				choiceType:'alipay',//alipay ，wxpay，unionpay
				choiceBankIndex:null,
				bankCards:[],
				withdraw_amount:'',
				bank_card_id:'',
				bank_name:'',
				cert_number:'',
				withdrawalState:null,
				remark:null,
				bankDate:false,
			}
		},
		methods:{
			...mapMutations([
				'setUser'
			]),
			choiceMethods(type){
				this.choiceBankIndex = null
				this.choiceType = type
			},
			choiceBank(index,id,name,num){
				this.choiceType = 'unionpay'
				this.choiceBankIndex = index
				this.bank_card_id = id
				this.bank_name = name
				this.cert_number = num
			},
			addBankCard(){
				uni.navigateTo({
					url:'/packs/pages/withdrawal/bankCard',
				})
			},
			back(){
				uni.navigateBack()
			},
			backHome(){
				this.$refs.withdrawalStatePopup.close()
				if(this.statusBar>0){
					uni.navigateBack({})
				}else{
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/index/index'
						})
					},300)
				}
			},
			closePop(){
				this.$refs.withdrawalStatePopup.close()
			},
			getBankCards(){
				getBankCards().then(res=>{
					console.log(res);
					if(!res.message){
						if(res.cert_number!=''){
							this.bankDate = res
							this.bankDate.logo ="https://yangfubing.gitee.io/bank.logo/resource/logo/"+ this.bankDate.bank_abbr +".png";
							
							
						}else{
							this.bankDate = false
						}
					}
				})
			},
			clearMoneyNum(){
				this.withdraw_amount = ''
			},
			allMoneyNum(){
				this.withdraw_amount = this.user.balance;
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async checkWithdrawState(){
				let response = await checkWithdrawState()
				if(response.data){
					this.withdrawalState = response.data.status
					this.remark = response.data.remark
					this.$refs.withdrawalStatePopup.open('center')
				}
			},
			async withdraws(){
				if(this.withdraw_amount==''){
					uni.showToast({
						icon:'none',
						title:'请输入提现金额'
					})
				}else{
					if(this.choiceType == 'alipay'){
						if(this.user.alipay_user_no==''){
							uni.showModal({
								content:'您还未绑定支付宝账号，绑定后提现到支付宝账号！',
								confirmText:'去绑定',
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'/packs/pages/withdrawal/addAliAccount?isBind=false'
										})
									}
								}
							})
							return
						}
					}
					let parms = {}
					if(this.choiceType != 'unionpay'){
						parms = {
							"withdraw_amount":this.withdraw_amount,  //提现金额
							"withdraw_method":this.choiceType  //提现方式  alipay ，wxpay ，unionpay
						}
					}else{
						parms = {
							"withdraw_amount":this.withdraw_amount,  //提现金额
							"withdraw_method":this.choiceType,  //提现方式  alipay ，wxpay ，unionpay
							"bank_card_id":this.bank_card_id //如果是银行卡，把选择的银行卡ID传过来
						}
					}
					
					await withdraws(parms)
					await this.checkWithdrawState()
					
					// this.$refs.withdrawalStatePopup.open('center')
					// this.withdrawalState = true
					this.withdraw_amount = ''
					await this.getUser()
				}
			}
		},
		async onShow() {
			this.getBankCards()
			await this.getUser()
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.withdrawal{
		position: relative;
		min-height: 100vh;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.hasBg{
		background: #F6F6F6;
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.withdrawal-amount{
		width: 718rpx;
		background: #FFFFFF;
		margin: 16rpx auto 0;
		position: relative;
	}
	.withdrawal-amount-title{
		font-size: 32rpx;
		font-weight: 400;
		color: #000;
		line-height: 82rpx;
		margin-left: 12rpx;
		height:82rpx;
		border-bottom:2rpx solid #f2f2f2;
	}
	.withdrawal-amount-ipt-box{
		display: flex;
		align-items: center;
		height:138rpx;
		line-height:138rpx;
		border-bottom:2rpx solid #f2f2f2;
		>view:nth-child(1){
			font-size: 40rpx;
			font-weight: bold;
			color: #272727;
			line-height: 48rpx;
			margin:0 16rpx 0 8rpx;
		}
		>input{
			width: 580rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}
		.clear-input{
			display: block;
			width: 32rpx;
			height: 32rpx;
		}
	}
	.withdrawal-amount-desc{
		
		>view:nth-child(1){
			color:#666;
			margin-left:12rpx;
			font-size:26rpx;
			padding-top:18rpx;
		}
		>view:nth-child(2){
			color:#999;
			margin-left:12rpx;
			font-size:26rpx;
			margin-top:18rpx;
			padding-bottom:30rpx;
		}
	}
	
	.withdrawal-methods{
		width:690rpx;
		height:316rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.1);
		border-radius: 16rpx;
		margin:16rpx auto 0;
	}
	.withdrawal-methods-title{
		border-bottom: 1rpx solid #F0F0F0;
		height: 106rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333330;
		line-height: 28rpx;
		text-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
		padding-left: 32rpx;
		display: flex;
		align-items: center;
	}
	.choice-item{
		height: 102rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.choice-item-line{
		width: 602rpx;
		height: 1rpx;
		background: #F0F0F0;
		margin-left: 88rpx;
	}
	.wechat-methods{
		display: block;
		width:44rpx;
		height: 44rpx;
		border-radius: 50%;
		margin:0 16rpx 0 24rpx;
	}
	.choice-item-left{
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000;
		margin-left:12rpx;
		
		line-height: 24rpx;
		text-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	.choice-radio{
		margin-right: 24rpx;
	
		display: flex;
		align-items: center;
		justify-content: center;
		>view{
			color:#999;
			font-size:26rpx;
			margin-right:10rpx;
		}
		>image{
			width:14rpx;
			height:18rpx;
			
		}
		
	}
	.choiced{
		display: block;
		width: 39rpx;
		height:39rpx;
		border-radius: 50%;
	}
	.withdrawal-use-bank-card{
		width: 718rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin:16rpx auto;
	}
	.bank-card-item{
		height: 102rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom:2rpx solid #f2f2f2;
	}
	.confirm-withdrawal{
		width: 506rpx;
		height: 100rpx;
		background: #EF8235;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin: 336rpx auto 0;
	}
	.withdrawal-state-modal{
		width: 686rpx;
		padding-bottom: 64rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.withdrawal-success{
		padding-top: 64rpx;
		.success{
			display: block;
			width: 96rpx;
			height: 96rpx;
			margin:0 auto;
		}
		.withdrawal-state-text{
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
			text-align: center;
			margin-top: 24rpx;
		}
		.withdrawal-state-tips{
			width: 520rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			margin: 24rpx auto 0;
			text-align: center;
			letter-spacing: 1rpx;
			.account-type{
				color:#333333;
			}
			.account-num{
				color:#1877FF;
				margin:0 5rpx;
			}
		}
		.withdrawal-success-btn-operation{
			display: flex;
			justify-content: center;
			margin-top: 80rpx;
			.go-detail{
				width: 272rpx;
				height: 84rpx;
				border-radius: 48rpx;
				border: 1rpx solid #1861F2;
				font-size: 36rpx;
				font-weight: 400;
				color: #1861F2;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 56rpx;
			}
			.back-home{
				width: 272rpx;
				height: 84rpx;
				background: #1877FF;
				border-radius: 48rpx;
				font-size: 36rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.withdrawal-fail{
		padding-top: 64rpx;
		.fail{
			display: block;
			width: 96rpx;
			height: 96rpx;
			margin:0 auto;
		}
		.withdrawal-state-text{
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
			text-align: center;
			margin-top: 24rpx;
		}
		.withdrawal-state-tips{
			width: 520rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			margin: 24rpx auto 0;
			text-align: center;
		}
		.withdrawal-fail-btn-operation{
			display: flex;
			justify-content: center;
			margin-top: 80rpx;
			.again-withdrawal{
				width: 272rpx;
				height: 84rpx;
				background: #1877FF;
				border-radius: 48rpx;
				font-size: 36rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.webtips{
		position: absolute;
		left:0;
		bottom:120rpx;
		width: 100%;
		height: 40rpx;
		font-size: 20rpx;
		color: #999999;
		text-align: center;
	}
	.bank-info{
		width:100%;
		height:142rpx;
		display:flex;
		.logo{
			width:76rpx;
			height:76rpx;
			margin-top:36rpx;
			margin-left:12rpx;
		}
		>view{
			margin-top:38rpx;
			margin-left:20rpx;
			>view:nth-child(1){
				font-size:28rpx;
				color:#333;
			}
			>view:nth-child(2){
				font-size:24rpx;
				color:#999;
				margin-top:2rpx;
			}
			
		}
	}
</style>
